<template>
	<main class="page van-safe-area-top">
		<header class="user-header">
			<i class="iconfont user-header-img">&#xe720;</i>
			<div class="main-info">
				<van-image class="avatar" round fit="cover" :src="userAvatar"></van-image>
				<div class="content">
					<b class="staff-name">{{storeUser.staffName}}</b>
					<div class="account-info">
						<span>Id: {{storeUser.staffId}}</span>
						<span class="pre">|</span>
						<span>{{transProv(storeUser.provinceCode)}}-齐齐哈尔</span>
					</div>
					<div class="medal-info">
						<div class="staff-type">{{transUserType(storeUser.staffType+'')}}</div>
						<van-tag plain type="primary" size="medium" mark>核心示范店</van-tag>
					</div>
				</div>
				<div class="right-btns">
					<van-icon name="chat-o" />
					<van-icon name="setting-o" />
				</div>
			</div>
			<van-row justify="center" gutter="8">
				<van-col span="6"><div @click="to('/favor/offer')"><label>999</label><small>收藏</small></div></van-col>
				<van-col span="6"><div @click="to('/favor/shop')"><label>999</label><small>关注店铺</small></div></van-col>
				<van-col span="6"><div @click="to('/favor/footprint')"><label>9999</label><small>足迹</small></div></van-col>
				<van-col span="6"><div><label>9999</label><small>优惠券</small></div></van-col>
			</van-row>
		</header>
		<van-sticky>
			<div class="float-nav">
				<div class="staff-name">{{storeUser.staffName}}</div>
				<div class="right-btns">
					<van-icon name="chat-o" />
					<van-icon name="setting-o" />
				</div>
			</div>
		</van-sticky>
		<van-cell-group inset :border="false">
			<div class="cell-group-title">
				<label>我的订单</label>
				<router-link class="font-12 txt-gray" :to="'/order/myOrders'">更多 <van-icon name="arrow"/></router-link>
			</div>
			<van-grid :column-num="5" :border="false">
				<van-grid-item icon="pending-payment" text="待付款" badge="99+" to="/order/myOrders?ordStatus=01&timeType=1"/>
				<van-grid-item icon="tosend" text="待发货" badge="99+" to="/order/myOrders?ordStatus=02&timeType=1"/>
				<van-grid-item icon="logistics" text="待收货" badge="99+" to="/order/myOrders?ordStatus=05&timeType=1"/>
				<van-grid-item icon="completed-o" text="已完成" to="/order/myOrders?ordStatus=06&timeType=1"/>
				<van-grid-item icon="refund-o" text="退款/售后" badge="99+" />
			</van-grid>
		</van-cell-group>
		<van-cell-group inset :border="false">
			<div class="cell-group-title"><label>我的财富</label></div>
			<van-grid :column-num="5" :border="false" class="my-wealth">
				<van-grid-item text="价保返利(元)" style="flex-basis:30%!important;">
					<template #icon><div class="font-14 txt-primary"><Price :value="35432552"/></div></template>
				</van-grid-item>
				<van-grid-item text="终端券U币" style="flex-basis:30%!important;">
					<template #icon><div class="font-14 txt-primary"><Price :value="35432552"/></div></template>
				</van-grid-item>
				<van-grid-item icon="ecard-pay" text="电子账户"  />
				<van-grid-item icon="gem-o" text="沃金融" />
			</van-grid>
		</van-cell-group>
		<van-cell-group inset :border="false">
			<div class="cell-group-title"><label>更多服务</label></div>
			<van-grid :column-num="4" :border="false" class="my-wealth">
				<van-grid-item icon="ecard-pay" text="电子账户"  />
				<van-grid-item icon="gem-o" text="沃金融" />
				<van-grid-item icon="ecard-pay" text="电子账户"  />
				<van-grid-item icon="gem-o" text="沃金融" />
				<van-grid-item icon="ecard-pay" text="电子账户"  />
				<van-grid-item icon="gem-o" text="沃金融" />
				<van-grid-item icon="ecard-pay" text="电子账户"  />
				<van-grid-item icon="gem-o" text="沃金融" />
			</van-grid>
		</van-cell-group>
		<div class="pd20">
			<van-button round plain block type="danger" class="font-16">退出登录</van-button>
		</div>
		<br/>
	</main>
</template>
<style lang="scss" scoped>
.page{
	padding-bottom:calc(50px + env(safe-area-inset-bottom)); overflow:hidden;
	.user-header{
		position:relative;width:100%;padding:14px 14px 0 14px;
		&::before{
			content:' ';position:absolute;left:0;top:0;width:100%;height:250px;opacity:.08;z-index:-1;
			background:linear-gradient(180deg, transparent -10%, var(--van-primary-color) 30%, transparent 100%);
		}
		&-img{
			font-size:52vw;display:block; height:44vw;line-height:44vw;position:absolute;top:0;right:-20px;
			color:var(--van-primary-color);opacity:.05;z-index:-1;
		}
		.main-info{
			padding:6px 0 0 2px; display:flex; align-items: center;
			.avatar{
				flex-shrink:0; width:62px; height:62px;border:1px solid var(--van-primary-color);
			}
			.content{
				padding-left:10px;width:56vw; position:relative;
				.staff-name{display:block;font-size:16px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
				.staff-type{
					height:20px; color:var(--white-color); background:var(--nav-bg-color); display:flex;
					border-radius:4px; padding:0 6px; text-align:center; line-height:22px; font-size:12px;
				}
				.account-info{
					font-size:12px; color:var(--font-third-color);display:flex;padding:3px 0 1px;
					.van-icon{margin-right:2px;font-size:14px;}
					.pre{margin:0 6px; color:var(--font-disable-color);}
				}
				.medal-info{
					display:flex; align-items: center;transform: scale(.8);transform-origin: left center;
					//position:absolute;left:10px;bottom:-18px;width:100%;
					.van-tag{margin-left:10px;}
				}
			}
		}
		.van-row{
			margin:14px 0 4px;
			.van-col{
				text-align: center;
				label{display:block;font-weight:bold;}
				small{font-size:12px; color:var(--font-third-color);}
			}
		}
	}
	.right-btns{
		height:60px;width:72px; flex-shrink: 0; text-align: right;
		.van-icon{
			width:24px;height:24px;font-size:24px;text-align:center;line-height:24px;margin:8px;cursor:pointer;
			&:last-child{margin-right:0;}
		}
	}
	.float-nav{
		display:flex; align-items:center; padding:0 14px; height:0; background:var(--body-bg-color); overflow:hidden;
		position:relative;width:100vw; justify-content:space-between;
		&::before{
			content:' ';position:absolute;left:0;top:0;width:100%;height:100%;opacity:.08;
			background:linear-gradient(90deg, transparent -50%, var(--van-primary-color) 100%);
		}
		.right-btns{height:44px;position:relative;z-index:1;}
		.staff-name{padding-left:2px;width:70%;font-size:16px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;position:relative;z-index:1;}
	}
	:deep(.van-sticky--fixed){
		.float-nav{height:44px;display:flex;align-items: center;}
	}
	.cell-group-title{margin-bottom:-10px;}
	.my-wealth{
		.font-14{height:28px;line-height:28px;color:var(--van-primary-color);}
		:deep(.van-grid-item__text){margin-top: var(--van-padding-xs);color:var(--font-second-color);}
	}
}
</style>
<script lang="ts" setup>
const {storeUser} = useStore()  //从store工厂中取出要指定使用的若干个状态数据
const { transProv,transUserType} =useKV()
//直接调用状态管理中的方法，异步读取服务端(mock)数据
storeUser.getUserInfo().then((res:any)=>{
	console.log(res,storeUser.avatar)
}).catch((e:any)=>{
	console.log(e)
})
const userAvatar=computed(()=>{
	return storeUser.avatar? storeUser.avatar:'/img/avatar/avatar.png'
})

//methods
const {to} =useGoto()
</script>